<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js"></script>
    <link id="layuicss-layer" rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css" media="all">
   <!-- <script src="../../js/jquery-1.9.1.min.js"></script> -->
</head>
<body>
<!-- 添加功能弹出层div开始（隐藏） -->
<div style="display: none;" id="saveDiv">
<form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm"  >
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色编号</label>
        <div class="layui-input-block">
            <input style="width: 250px" type="text" name="sn" required  lay-verify="required" placeholder="请输入角色编号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="doSubmit1">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>
<!-- 添加功能弹出层div结束 -->

<!-- 修改功能弹出层div开始（隐藏） -->
<div style="display: none;" id="UpdateDiv">
    <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm"  >
        <div class="layui-form-item">
            <label class="layui-form-label">角色id：</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="id" required  lay-verify="required" placeholder="请输入角色id" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">角色编号：</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="sn" required  lay-verify="required" placeholder="请输入角色编号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">权限：</label>
        <div id="test2" class="demo-transfer"></div>
        </div>
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="doSubmit2">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    </div>
<!-- 修改功能弹出层div结束 -->

<!-- 主界面开始 -->
<div class="box">
    <div class="layui-card">
        <div class="layui-card-header" ><h1 style="color: #1E9FFF;"><strong>角色管理</strong></h1></div>
        <div class="layui-card-body">
            <table class="layui-table" id="table" lay-filter="test"></table>
        </div>
    </div>
</div>
<!-- 主界面结束 -->

<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">批量选中</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
    </div>
</script>

<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    //声明所使用的layUI组件（全局）
    layui.use(["table","form","laypage"],function(){
        var table = layui.table;
        var form = layui.form;
        var $ =layui.jquery;
        var laypage = layui.laypage;
        var transfer = layui.transfer;
        $.ajaxSetup({
                // 发送cookie
                xhrFields: {
                    withCredentials: true
                }
            });
        //前端接口（URL）接受后端数据进行数据表格的渲染
        var tableIns = table.render({
            elem:'#table',
            toolbar: '#toolbarDemo',
            url:'http://localhost:8888/role/queryPage',
            parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },
            //设置表头
            cols:[[
                {field:'select',type:"checkbox"},
                {field:'id',title:'编号',sort:true},
                {field:'name',title:'角色名称'},
                {field:'sn',title:'角色编号',sort:true},
                {field:'操作',title:'操作',toolbar:'#barDemo',fixed:'right'}
            ]],
            
            //分页
            page:{
                    layout:['prev','page','next','count']//,'limit','skip'
                    ,page:function(res){
                        return res.page
                    } //获取currentPage
    
                    // ,limit:function(res){
                    //     return res.limit
                    // }//获取pageSize
                    ,groups:10 //最多显示几个跳页按钮
                    ,first:true //显示首页
                    ,last:true  //显示尾页
                }
        });

        //头部工具栏
        table.on('toolbar(test)',function (obj){
            //打印事件名
            console.log(obj);
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            // 获取事件名
            var eventName = obj.event;
            switch (eventName){
                    case "getCheckLength":
                    var arr = checkStatus.data;
                    layer.msg("选中了"+arr.length+"条数据！");
                    break;
                    case "isAll":
                     var flag = checkStatus.isAll;
                     var str = flag ? '全选' : '未全选' ;
                    layer.msg(str);
                    break;
                    //若点击“新增”按钮，进入该事件，调用新增方法openAdd();
                    case "insert":
                    openAdd();
                    default:
                        break;

                };
            });


        //行工具栏事件监听
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                console.log(obj);
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）     
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        console.log(data);
                        console.log(data.id);
                        layer.close(layer.index);
                        $.ajax({
                        url:'http://localhost:8888/role/deleteRole', //删除数据接口
                        type: 'POST',
                        data: {
                            id:data.id
                        },
                        success:function(res){
                        alert("删除成功");

                        //重新加载数据表格
                        tableIns.reload();
                        },error:function(){
                            alert("删除失败");
                        },
                    })

                    });
                } else if(layEvent === 'edit'){ //点击修改进入该事件，调用修改方法
                    openUpdate(data);
                }
        });
        
        //统一定义接口变量名和弹出层变量名（方便监听提交表单和关闭弹出层使用）
        var url;
        var mainIndex;

        //新增方法（函数）
        function  openAdd(){
            var mainIndex=layer.open({
                type:1,
                title:'新增',
                content:$("#saveDiv"),
                area:['800px','400px'],
                success:function (){
                    $("#dataFrm")[0].reset();
                    url="http://localhost:8888/role/addRole";
                }
            });
           
        }
        //修改方法（函数）
        function openUpdate(data){
            var mainIndex=layer.open({
                type:1,
                title:'编辑',
                content:$("#UpdateDiv"),
                area:['800px','500px'],
                success:function (index){
                    form.val("dataFrm",data);
                    url="http://localhost:8888/role/updateRole";
                }
            })
             
        }

                //模拟数据
        var data1 = [
            {"value": "1", "title": "客户新增"}
            ,{"value": "2", "title": "跟进历史"}
            ,{"value": "3", "title": "部门列表"}
            ,{"value": "4", "title": "部门删除"}
            ,{"value": "5", "title": "员工新增", "disabled": true}
            ,{"value": "6", "title": "员工历史"}
            ,{"value": "7", "title": "员工新增"}
            ,{"value": "8", "title": "员工列表"}
            ,{"value": "9", "title": "员工新增"}
        ]
                //修改表单穿梭框
                transfer.render({
            elem: '#test2'
            ,title: ['可选权限','新增权限']
            ,data: data1
            //,width: 150 //定义宽度
            ,height: 210 //定义高度
        })

        // 监听提交新增
        form.on('submit(doSubmit1)', function(obj){
                //序列化/提交表单
                // var params = $("#dataFrm").serialize();
                // alert(params);
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                url="http://localhost:8888/role/addRole";
                $.post(url,obj.field,function (result){
                    // console.log("fangwangenc");
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                    
                })
                
                 layer.close(mainIndex);
                    //刷新表格
                    tableIns.reload();
        });
        // 监听提交修改
        form.on('submit(doSubmit2)', function(obj){
              //序列化/提交表单
                // var params = $("#dataFrm").serialize();
                // alert(params);
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                url="http://localhost:8888/role/updateRole";
                var data = $("[name='id']").val()
                $.post(url,obj.field,function (result){
                    // console.log("fangwangenc");
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    } 
                    layer.close(mainIndex);
                    //刷新表格
                    tableIns.reload();
                }) 
        });
    });
        // $("closeBtn").click(function(){
        //     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        //     parent.layer.close(index); //再执行关闭 
        // })

</script>
</body>
</html>